<template>
    <div>
        <!-- 悬浮框模板 -->

        <!-- 表格 -->
        <el-table :data="companyNotice" style="width: 100%">
            <el-table-column v-for="column in tableColumns" :key="column.prop" :label="column.label">
                <template slot="header" slot-scope="scoped">
                    <span class="column-header">{{ column.label }}</span>
                    <el-popover placement="bottom" trigger="click" @click.native.stop>
                        <div style="padding: 30px">
                            <el-radio-group v-model="column.sortType" style="display: flex; flex-direction: column">
                                <el-radio label="'asc'">按A→Z排序</el-radio>
                                <el-radio style="margin-top: 10px" label="'desc'">按Z→A排序 </el-radio>
                            </el-radio-group>

                            <el-input v-model="column.filterKeyword" placeholder="请输入筛选关键词"
                                suffix-icon="el-icon-search"></el-input>
                            <div style="text-align: right; margin-top: 10px">
                                <el-button type="primary" size="medium"
                                    @click="applyColumnChanges(column)">确定</el-button>
                            </div>
                        </div>
                        <i slot="reference" class="el-icon-caret-bottom"></i>
                    </el-popover>
                </template>
                <template slot-scope="scope">
                    {{ scope.row[column.prop] }}
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="bottom">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pagination.currentPage" :page-sizes="[10, 20, 50]" :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="companyNotice.length">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getNoticeList } from '@/api/index'

export default {
    data() {
        return {
            sid:'88e2fcc3-4450-4594-8758-67bc7c7df9ec',
            companyNotice: [],
            tableData: [
                {
                    title: "公告标题1",
                    author: "张三",
                    signer: "李四",
                    department: "人力资源部",
                    publishDate: "2024-07-01",
                },
                {
                    title: "公告标题2",
                    author: "王五",
                    signer: "赵六",
                    department: "财务部",
                    publishDate: "2024-07-02",
                },
                {
                    title: "公告标题3",
                    author: "钱七",
                    signer: "孙八",
                    department: "市场部",
                    publishDate: "2024-07-03",
                },
                {
                    title: "公告标题4",
                    author: "周九",
                    signer: "吴十",
                    department: "技术部",
                    publishDate: "2024-07-04",
                },
            ],
            tableColumns: [
                { prop: "title", label: "标题", sortType: "asc", filterKeyword: "" },
                { prop: "author", label: "发布人", sortType: "", filterKeyword: "" },
                { prop: "signer", label: "签发人", sortType: "", filterKeyword: "" },
                { prop: "dept", label: "部门", sortType: "", filterKeyword: "" },
                {
                    prop: "publishDate",
                    label: "发布时间",
                    sortType: "",
                    filterKeyword: "",
                },
            ],
            pagination: {
                currentPage: 1,
                pageSize: 10,
            },
        };
    },
    created() {
        // 初始化时格式化当前日期
        var sid = window.sid;
        this.getNoticeList();
    },
    methods: {
        getNoticeList() {
            const _this = this;
            const params = {
                "nowPage": 1,
                "pageNum": 10,
                "fieldQuery": {
                    "title": "",
                    "publisher": "",
                    "signer": "李四",
                    "dept": "",
                    "releaseTime": {
                        "beginTime": "2023-01-04",
                        "endTime": "2024-02-05"
                    }
                },
                "order": {
                    "title": "asc",
                    "publisher": "desc",
                    "signer": "asc",
                    "dept": "desc",
                    "releaseTime": "asc"
                }
            };
            getNoticeList(_this.sid, params)
                .then(response => {
                    console.log(response, 'jiekou!!!!') // 假设响应数据是一个通知列表
                    _this.companyNotice = response.data.list;
                })
                .catch(error => {
                    console.error('获取通知列表失败', error);
                    // 处理错误响应，例如没有用户会话的情况
                    if (error.response && error.response.data && error.response.data.errorCode === '400') {
                        console.error(error.response.data.msg);
                    }
                });
        },
        updateFilterKeyword(column, event, index) {

            //    this.tableColumns[index].filterKeyword='4444444444444'


        },

        applyChanges() {
            // 应用整体排序和筛选
            console.log("应用整体排序和筛选");
        },
        applyColumnChanges(column) {
            // 这里可以处理点击确定按钮后的逻辑，例如根据 column.sortType 和 column.filterKeyword 更新 tableData
            console.log('Sort type:', column.sortType);
            console.log('Filter keyword:', column.filterKeyword);
            // 在实际应用中，根据 column.sortType 和 column.filterKeyword 更新 tableData
        },
        handleSizeChange(size) {
            // 分页大小变更
            console.log("分页大小变更", size);
        },
        handleCurrentChange(page) {
            // 当前页变更
            console.log("当前页变更", page);
        },
    },
};
</script>

<style lang="scss" scoped>
.column-header {
    font-family: "PingFang SC";
    font-weight: bold;
    font-size: 18px;
    color: #333333;
}

/* 可以添加一些自定义的样式 */
.el-popover {
    background: #ffffff;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.el-radio__label {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #666666;
}

.custom-radio {
    display: flex;
    align-items: center;
    /* 垂直居中 */
}

.custom-radio .el-radio__inner {
    order: 1;
    /* 调整选中框位置 */
    margin-left: 8px;
    /* 增加一些间距 */
}

.custom-radio .el-radio__label {
    order: 2;
    /* 调整文本位置 */
}

.bottom {
    margin-top: 40px;
}
</style>